<template>
    <div class="total-box">
        <div class="total-box-body">
            <div class="total-box-body-main">
                <div>
                    <div>积分赠送规则</div>
                    <div class="integral-rule-line" style="">
                        <el-checkbox-group v-model="checkList1" style="margin-right: 10px;">
                            <el-checkbox label="" />
                        </el-checkbox-group>
                        <div style="line-height: 32px;margin-right: 5px;">首次注册登录可获得</div>
                        <div style="width: 40%;">
                            <el-input v-model="input1" :disabled="inputstate1" placeholder="10">
                                <template #append>积分</template>
                            </el-input>
                        </div>
                    </div>
                    <div class="integral-rule-line" style="">
                        <el-checkbox-group v-model="checkList2" style="margin-right: 10px;">
                            <el-checkbox label="" />
                        </el-checkbox-group>
                        <div style="line-height: 32px;margin-right: 5px;">首次注册登录可获得</div>
                        <div style="width: 40%;">
                            <el-input v-model="input2" :disabled="inputstate2" placeholder="10">
                                <template #append>积分</template>
                            </el-input>
                        </div>
                    </div>
                    <div class="integral-rule-line" style="">
                        <el-checkbox-group v-model="checkList3" style="margin-right: 10px;">
                            <el-checkbox label="" />
                        </el-checkbox-group>
                        <div style="line-height: 32px;margin-right: 5px;">首次注册登录可获得</div>
                        <div style="width: 40%;">
                            <el-input v-model="input3" :disabled="inputstate3" placeholder="10">
                                <template #append>积分</template>
                            </el-input>
                        </div>
                    </div>
                    <div style="border-bottom: 1px solid color(srgb 0.9, 0.9, 0.9);"></div>
                </div>
                <div class="deduction-integral">
                    <div style="margin-top: 20px;">积分抵扣规则</div>
                    <div class="integral-rule-line">
                        <el-radio-group v-model="radio1">
                            <div>
                                <el-radio label="不使用积分抵扣" size="large">不使用积分抵扣</el-radio>
                            </div>
                            <el-radio label="使用积分抵扣" size="large"></el-radio>
                        </el-radio-group>
                        <div style="margin-left: 10px;">
                            <div style="height: 40px; line-height: 40px;"></div>
                            <div style="height: 40px; line-height: 40px; display: flex; ">
                                <div v-if="radio1 == '使用积分抵扣'" style="margin-left: 10px;">
                                    <el-input v-model="input2" placeholder="100">
                                        <template #append>积分=1元</template>
                                    </el-input>
                                    <div class="integral-rule-line"
                                        style="margin: 0; margin-top: 20px;margin-bottom: 20px;">
                                        <el-checkbox-group v-model="checkList4" style="margin-right: 10px;">
                                            <el-checkbox label="" />
                                        </el-checkbox-group>
                                        <div style="line-height: 32px;margin-right: 5px;">单次消费最多使用</div>
                                        <div style="">
                                            <el-input v-model="input4" :disabled="inputstate4" placeholder="10">
                                                <template #append>积分</template>
                                            </el-input>
                                        </div>
                                    </div>
                                </div>
                                <div>


                                </div>


                            </div>

                        </div>
                    </div>
                </div>
                <div style="margin-top: 20px;">积分过期规则</div>
                <div class="integral-rule-line" >

                    <el-radio-group v-model="radio2">
                        <div>
                            <el-radio label="1" size="large">一直有效不过期</el-radio>
                        </div>
                        <el-radio label="2" size="large">获得的所有成长值在</el-radio>
                    </el-radio-group>
                    <div style="margin-left: 10px;">
                        <div style="height: 40px; line-height: 40px;"></div>
                        <div style="display: flex;">
                            <div style="height: 40px; line-height: 40px;margin-right: 10px;"></div>
                            <el-select v-model="select_value" :disabled="selectstate" placeholder="1月">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <div style="margin-left: 10px;line-height: 40px;">的12月31日过期</div>
                        </div>
                    </div>
                </div>
                <div style="border-bottom: 1px solid color(srgb 0.9 0.9 0.9);"></div>
                <div style="margin-top: 40px;display: flex;justify-content: center;">
                    <el-button type="primary" @click="editintegral">保存</el-button>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">

import { ref } from 'vue'
const checkList1 = ref([])
const checkList2 = ref([])
const checkList3 = ref([])
const checkList4 = ref([])

let input1 = ref('')
let input2 = ref('')
let input3 = ref('')
let input4 = ref('')

let inputstate1 = ref(true);
let inputstate2 = ref(true);
let inputstate3 = ref(true);
let inputstate4 = ref(true);
let selectstate =ref(true)
let radio1 = ref('')
let radio2 = ref('')
let select_value = ref('')

let options = [
    {
        value: '1月',
        label: '1月',
    },
    {
        value: '2月',
        label: '2月',
    },
    {
        value: '3月',
        label: '3月',
    },
    {
        value: '4月',
        label: '4月',
    },
    {
        value: '5月',
        label: '5月',
    },
    {
        value: '6月',
        label: '6月',
    },
    {
        value: '7月',
        label: '7月',
    },
    {
        value: '8月',
        label: '8月',
    },
    {
        value: '9月',
        label: '9月',
    },
    {
        value: '10月',
        label: '10月',
    },
    {
        value: '11月',
        label: '11月',
    },
    {
        value: '12月',
        label: '12月',
    },
]
watch(checkList1, (newValue, oldValue) => {
    inputstate1.value = !inputstate1.value;
});
watch(checkList2, (newValue, oldValue) => {
    inputstate2.value = !inputstate2.value;
});
watch(checkList3, (newValue, oldValue) => {
    inputstate3.value = !inputstate3.value;
});
watch(checkList4, (nv, ov) => {
    inputstate4.value = !inputstate4.value;
})
watch(radio2, (nv, ov) => {
    selectstate.value = !selectstate.value;
})

const editintegral=()=>{
    ElMessage({
    message: h('p', null, [
      h('span', { style: 'color: green' }, '添加成功'),
    ]),
  })
}
</script>
<style scoped>
.deduction-integral {
    border-bottom: 1px solid color(srgb 0.9 0.9 0.9);
    height: 26%;
}

.integral-rule-line {
    display: flex;
    width: 100%;
    justify-content: left;
    margin: 20px;
}



:deep(.el-breadcrumb) {
    line-height: 45px;
    font-size: 16px;
}

:deep(.el-radio-group) {
    display: block;
}
</style>